<script setup lang="ts">
// 引入组合式API
import { ref } from 'vue'
// 引入子组件
import HelloWorld from './components/HelloWorld.vue'
import ProductList from '@/components/ProductList.vue'
import ShoppingCart from '@/components/ShoppingCart.vue'
// 隐藏helloworld
const show = ref(false)
</script>

<template>
  <h1>Pinia - 购物车实例</h1>
  <hr />
  <h2>商品列表</h2>
  <ProductList />
  <hr />
  <ShoppingCart />
  <HelloWorld v-if="show" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
